<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>交易管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单流水查询</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="box-card">
            <el-form :inline="true" ref="formQuery" :model="formQuery" class="demo-form-inline" label-width="100px">
                <el-form-item label="交易时间">
                    <el-date-picker
                      v-model="formQuery.ymd"
                      type="date"
                      placeholder="选择日期"
                      format="yyyyMMdd"
                    >
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="所属代理商" prop="agentId" >
                    <el-select v-model="formQuery.agentId" placeholder="请选择" @change="getAllMerData">
                        <el-option
                            v-for="item in agentList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属商户" prop="merchantId">
                    <el-select v-model="formQuery.merchantId" placeholder="请选择"  @change="changeMerData">
                        <el-option
                            v-for="item in merList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item label="imei">
                    <el-input v-model="formQuery.imei" placeholder="imei"></el-input>
                </el-form-item>
                <el-button type="primary" icon="search" @click="onSubmit">查询</el-button><!--
                <el-button type="primary" icon="search" @click="exportExcl">导出</el-button> -->
            </el-form>
        </el-card>
        <el-card class="box-card">
          <el-row :gutter="24">
            <el-col :span="8">
                <i class="el-icon-rank"></i>
                <div class="amtPosition clearfix">
                  <span>  商户交易总额(元)</span>
                  <span class="">{{allTotal}}</span>
                </div>
            </el-col>
            <el-col :span="8">
                <i class="el-icon-rank"></i>
                <div class="amtPosition clearfix">
                  <span>商户线上交易总额(元)</span>
                  <span class="">{{onlinepTotal}}</span>
                </div>
            </el-col>
            <el-col :span="8">
                <i class="el-icon-rank"></i>
                <div class="amtPosition clearfix">
                  <span>商户投币交易总额(元)</span>
                  <span class="">{{coinsTotal}}</span>
                </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
            <el-table :data="tableData" border class="table" ref="multipleTable" :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="序号" align="center" width="50">
                </el-table-column>
                <el-table-column prop="orderNo" label="商户订单号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="agentId" label="代理商编号" width="100" align="center">
                </el-table-column>
                <el-table-column prop="agentName" label="代理商名称" width="150" align="center">
                </el-table-column>
                <el-table-column prop="merchantId" label="商户编号" width="100" align="center">
                </el-table-column>
                <el-table-column prop="merchantName" label="商户名称" width="150" align="center">
                </el-table-column>
                <el-table-column prop="orderState" :formatter="filterStatus" label="交易状态" width="100" align="center"></el-table-column>
                <el-table-column prop="chargeState" :formatter="filterState" label="充电状态" width="100" align="center">
                </el-table-column>
                <el-table-column prop="amount" label="交易金额（元）" width="150" align="center">
                </el-table-column>
                <!-- <el-table-column prop="serviceAmt" label="手续费金额（元）" width="150" align="center">
                </el-table-column> -->
                <!-- <el-table-column prop="agentProfit" label="代理商分润" width="200" align="center">
                </el-table-column> -->
                <!-- <el-table-column prop="merProfit" label="商户分润" width="200" align="center">
                </el-table-column> -->
                <!-- <el-table-column prop="bossProfit" label="平台分润" width="100" align="center">
                </el-table-column> -->
                <el-table-column prop="payType" label="交易类型" :formatter="filterType" width="100" align="center">
                </el-table-column>
                <el-table-column prop="creatTime" label="交易时间" :formatter="filterDate" width="120" align="center">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize">
                </el-pagination>
            </div>
        </el-card>

    </div>
</template>
<script>
    import moment from 'moment'

    export default {
        name: 'basetable',
        data() {
            return {
              agentList: [],    // 代理商列表
              merList: [], // 商户列表
              tableData: [],
              is_search: false,
              formQuery: {
                  merchantId: '',
                  agentId:'',
                  imei:'',
                  ymd: '',
                  pageNo: 1,      // 当前页数
              },
              pickerOptions2: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
              allTotal:0.00, // 商户交易总额(元)
              onlinepTotal:0.00, // 商户线上交易总额(元)
              coinsTotal:0.00, // 商户投币交易总额(元)
              pageData: {
                total: 0,
                pageSize: 10,
              },
            }
        },
        mounted() {
            // this.getAllData()
            this.getData();
            this.getCount();
        },
        computed: {
            data() {
                // return this.tableData.filter((d) => {
                //     let is_del = false;
                //     if (!is_del) {
                //         return d;
                //     }
                // })
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 分页导航
            handleCurrentChange(val) {
                this.formQuery.pageNo = val;
                this.getData();
            },
            async getAllData() {
                let res1 = await this.request('allAgentList')
                this.agentList = res1.data
                this.formQuery.agentId = res1.data[0].id
                this.getData()
            },
            async getAllMerData(agentId) {
                const param ={
                  agentId
                }
                let res1 = await this.request('allMerchantList',param, 'get')
                this.merList = res1.data
                this.formQuery.merchantId = res1.data[0].id
                this.getData()
            },
            async getCount() {   // 获取数据
                let res = await this.request('orderCount')
                this.onlinepTotal = Number(res.data.onLine);
                this.coinsTotal =Number(res.data.offLine);
                this.allTotal = this.onlinepTotal + this.coinsTotal;
            },
            async getData() {   // 获取数据
                let res = await this.request('orderList', this.formQuery)
                this.tableData = res.data.list;
                this.pageData = {
                    total: res.data.total,
                    pageSize: res.data.pageSize
                }
            },
            async onSubmit() {
                // if(this.formQuery.ymd){
                //     this.formQuery.ymd = moment(this.formQuery.ymd).format('YYYYMMDD')
                // } else {
                //     this.formQuery.ymd = ''
                // }

               let res = await this.request('orderQuery', this.formQuery)
               this.tableData = res.data.list;
               this.pageData = {
                   total: res.data.total,
                   pageSize: res.data.pageSize
               }
            },
            filterDate(row, column) {
                let time = moment(row.creatTime).format('YYYY-MM-DD')
                return time;
            },
            filterStatus(row, column) {
                let txt = '';
                if(row.orderState === 'init'){
                    txt = '已下单'
                } else if(row.orderState === 'payed'){
                    txt = '已支付'
                } else if(row.orderState === ' noticed'){
                    txt = '已通知充电桩'
                }
                return txt;
            },
            filterState(row, column) {
                let txt = '';
                if(row.chargeState === 'charging'){
                    txt = '正在充电'
                } else if(row.chargeState === 'charged'){
                    txt = '已完成'
                } else if(row.chargeState === ' init'){
                    txt = '未充电'
                }
                return txt;
            },
            filterType(row, column) {
                let txt = '';
                if(row.payType === 'wechat'){
                    txt = '微信支付'
                } else if(row.payType === 'alipay'){
                    txt = '支付宝支付'
                } else if(row.payType === 'coin'){
                    txt = '投币消费'
                }else if(row.payType === 'card'){
                    txt = '刷卡消费'
                }else if(row.payType === 'hongbao'){
                    txt = '红包消费'
                }
                return txt;
            },
            exportExcl() {

            },
            beforeDate() {

            },
            behindDate() {

            },
            filterTag(value, row) {
                return row.tag === value;
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .box-card{
      margin-bottom: 10px;
    }

    .el-icon-rank{
      font-size: 40px;
    }

    .amtPosition{
      display: inline-block;
      width: 150px;
    }
</style>
